<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">企业名称</view>
				</view>
				<view>
					<u--input placeholder="请输入" border="surround" v-model="form.name"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">企业行业</view>
				</view>
				<view @click="choosePicker(1)">
					<u-input placeholder="请选择" readonly border="surround" v-model="form.industry_category_name">
						<template #suffix>
							<image class="arrow-d" src="/static/public/right.png" mode=""></image>
						</template>
					</u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">企业性质</view>
				</view>
				<view @click="choosePicker(2)">
					<u-input placeholder="请选择" readonly border="surround" v-model="form.company_type_name">
						<template #suffix>
							<image class="arrow-d" src="/static/public/right.png" mode=""></image>
						</template>
					</u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">人员规模</view>
				</view>
				<view @click="choosePicker(3)">
					<u-input placeholder="请选择" readonly border="surround" v-model="form.company_scale_name">
						<template #suffix>
							<image class="arrow-d" src="/static/public/right.png" mode=""></image>
						</template>
					</u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">负责人</view>
				</view>
				<view>
					<u--input placeholder="请输入" border="surround" v-model="form.contact_person"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">电话</view>
				</view>
				<view>
					<u--input placeholder="请输入" border="surround" v-model="form.contact_phone"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">地址</view>
				</view>
				<view class="address-form">
					<u--input placeholder="请获取地址" readonly border="surround" v-model="form.address"></u--input>
					<view class="address" @click="getLocation">获取位置</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">公司简介</view>
				</view>
				<view>
					<textarea class="textarea" auto-height v-model="form.intro" placeholder="请输入" maxlength="600"
						placeholder-class="colb"></textarea>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">企业Logo</view>
				</view>
				<view class="logo" @click="uploadLogo">
					<template v-if="!form.logo_image">
						<image class="add" src="/static/public/add.png" mode=""></image>
						<view class="titles">上传</view>
					</template>
					<image v-else style="width: 100%;height: 100%;" :src="baseUrl + form.logo_image" mode="aspectFill">
					</image>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-top">
					<view class="imp">*</view>
					<view class="form-item-title">企业执照或相关证件</view>
				</view>
				<view class="multi-file">
					<view class="logo" v-for="item in form.other_images" :key="item">
						<image v-if="item" @click="deleteFile(item)" src="/static/public/close.png" class="close"
							mode=""></image>
						<image style="width: 100%;height: 100%;" :src="baseUrl + item" mode="aspectFill"></image>
					</view>
					<view class="logo" @click="uploadFile()">
						<image class="add" src="/static/public/add.png" mode=""></image>
						<view class="titles">上传</view>
					</view>
				</view>
			</view>
			<view class="wangweiinfo">
				<view class="title">岗位信息</view>
				<view class="add" @click="addJob">
					<image src="/static/public/add-w.png" mode=""></image>
					<view class="title">增加</view>
				</view>
			</view>
			<view class="info-form" v-for="(item,index) in form.jobs" :key="item">
				<image class="sub" @click="subJob(index)" v-if="index!=0" src="/static/public/sub.png" mode=""></image>
				<view class="info-form-item">
					<view class="info-form-item-title">职位</view>
					<u--input placeholder="请输入" border="surround" v-model="item.title"></u--input>
				</view>
				<view class="info-form-item">
					<view class="info-form-item-title">薪酬</view>
					<u--input placeholder="请输入" border="surround" v-model="item.salary"></u--input>
				</view>

				<view class="info-form-item" @click="addXueLi(index)">
					<view class="info-form-item-title">学历</view>
					<u-input placeholder="请输入" readonly border="surround" v-model="item.education_level_name">
						<template #suffix>
							<image class="arrow-d" src="/static/public/right.png" mode=""></image>
						</template>
					</u-input>
				</view>

				<view class="info-form-item">
					<view class="info-form-item-title">岗位描述</view>
					<textarea class="textarea" auto-height v-model="item.descr" placeholder="请输入岗位描述" maxlength="600"
						placeholder-class="colb"></textarea>
				</view>
			</view>
			<view class="footer">
				<view class="footer-1" @click="zanCun">暂时保存</view>
				<view class="footer-2" @click="submit">提交</view>
			</view>
			<u-picker @cancel="(e)=>closePicker(e,1)" @confirm="(e)=>confirmPicker(e,1)" :show="show1"
				:columns="columns1" keyName="name"></u-picker>
			<u-picker @cancel="(e)=>closePicker(e,2)" @confirm="(e)=>confirmPicker(e,2)" :show="show2"
				:columns="columns2" keyName="name"></u-picker>
			<u-picker @cancel="(e)=>closePicker(e,3)" @confirm="(e)=>confirmPicker(e,3)" :show="show3"
				:columns="columns3" keyName="name"></u-picker>
			<u-picker @cancel="(e)=>closePicker(e,4)" @confirm="(e)=>confirmPicker(e,4)" :show="show4"
				:columns="columns4" keyName="name"></u-picker>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				baseUrl: app.globalData.imgPreviewUrl,
				columns1: [],
				show1: false,
				columns2: [],
				show2: false,
				columns3: [],
				show3: false,
				columns4: [],
				show4: false,

				form: {
					recruitment_meeting_id: '', //招聘会id
					name: "", //企业名称
					contact_person: "", //联系人
					contact_phone: "", //联系人电话
					address: "",
					longitude: "",
					latitude: "",
					industry_category_id: "", //企业行业
					industry_category_name: "", //企业行业
					company_scale_id: "", //企业规模
					company_scale_name: "", //企业规模
					company_type_id: "", //企业性质
					company_type_name: "", //企业性质
					intro: "", //企业介绍
					logo_image: "",
					other_images: [],
					jobs: [{
						title: "",
						salary: "",
						education_level_id: '',
						education_level_name: '',
						descr: ""
					}] //岗位列表
				},
				temIdx: -1,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad({
			id
		}) {
			this.form.recruitment_meeting_id = id
			const item = uni.getStorageSync('baoming') || {}
			console.log(item[id], 'item[id]item[id]');
			if (item[id]) {
				this.form = item[id]
				console.log(this.form);
			}
			console.log(this.form, '111');
			this.getSetting()
		},
		methods: {
			getSetting() {
				this.$core.get({
					url: 'xilujob.third/getSettings',
					success: ret => {
						console.log(ret);
						for (const key in ret.data.industry_category) {
							this.columns1.push({
								id: key,
								name: ret.data.industry_category[key]
							})
						}
						this.columns1 = [this.columns1]
						console.log(this.columns1, 'this.columns1');
						for (const key in ret.data.company_types) {
							this.columns2.push({
								id: key,
								name: ret.data.company_types[key]
							})
						}
						this.columns2 = [this.columns2]
						for (const key in ret.data.scales) {
							this.columns3.push({
								id: key,
								name: ret.data.scales[key]
							})
						}
						this.columns3 = [this.columns3]
						for (const key in ret.data.education_level) {
							this.columns4.push({
								id: key,
								name: ret.data.education_level[key]
							})
						}
						this.columns4 = [this.columns4]
						// this.columns1 = [Object.values(ret.data.industry_category)]
						// this.columns2 = [Object.values(ret.data.company_types)]
						// this.columns3 = [Object.values(ret.data.scales)]
					}
				});
			},
			choosePicker(type) {
				if (type == 1) {
					this.show1 = true
				} else if (type == 2) {
					this.show2 = true
				} else {
					this.show3 = true
				}
			},
			closePicker(e, type) {
				if (type == 1) {
					this.show1 = false
				} else if (type == 2) {
					this.show2 = false
				} else if (type == 3) {
					this.show3 = false
				} else {
					this.show4 = false
					this.temIdx = -1
				}
			},
			confirmPicker(e, type) {
				console.log(e, type);
				if (type == 1) {
					this.form.industry_category_name = e.value[0].name
					this.form.industry_category_id = e.value[0].id
					this.show1 = false
				} else if (type == 2) {
					this.form.company_type_name = e.value[0].name
					this.form.company_type_id = e.value[0].id
					this.show2 = false
				} else if (type == 3) {
					this.form.company_scale_name = e.value[0].name
					this.form.company_scale_id = e.value[0].id
					this.show3 = false
				} else {
					this.form.jobs[this.temIdx].education_level_id = e.value[0].id
					this.form.jobs[this.temIdx].education_level_name = e.value[0].name
					this.show4 = false
					this.temIdx = -1
					this.$forceUpdate()
				}
			},
			getLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.form.address = res.address
						this.form.longitude = res.longitude
						this.form.latitude = res.latitude
					}
				});
				return

			},
			uploadLogo() {
				let page = this;
				uni.chooseImage({
					success: res => {
						uni.showLoading({})
						let file = res.tempFiles[0];
						page.$core.uploadFile({
							filePath: file.path,
							success: (ret, response) => {
								uni.hideLoading()
								this.form.logo_image = ret.data.noHttpUrl
							}
						});
					}
				});
			},
			uploadFile() {
				let page = this;
				uni.chooseImage({
					success: res => {
						let file = res.tempFiles[0];
						uni.showLoading({})
						page.$core.uploadFile({
							filePath: file.path,
							success: (ret, response) => {
								console.log(ret, 'ret');
								uni.hideLoading()
								this.form.other_images.push(ret.data.noHttpUrl)
							}
						});
					}
				});
			},
			deleteFile(url) {
				this.form.other_images = this.form.other_images.filter(e => e != url)
			},
			addXueLi(index) {
				this.show4 = true
				this.temIdx = index
			},
			addJob() {
				this.form.jobs.push({
					title: "",
					salary: "",
					education_level_id: '',
					education_level_name: '',
					descr: ""
				})
			},
			subJob(index) {
				this.form.jobs.splice(index, 1)
			},
			zanCun() {
				const item = uni.getStorageSync('baoming') || {}
				console.log(this.form.recruitment_meeting_id, 'this.form.recruitment_meeting_id');
				uni.showModal({
					title: '温馨提示',
					content: '是否需要暂存当前报名信息',
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('baoming', {
								...item,
								[this.form.recruitment_meeting_id]: this.form
							})
							uni.$u.toast('报名信息已保存')
						}
					}
				})

			},
			submit() {
				if (!this.form.name) return uni.$u.toast('请输入企业名称')
				if (!this.form.industry_category_name) return uni.$u.toast('请选择企业行业')
				if (!this.form.company_type_name) return uni.$u.toast('请选择企业性质')
				if (!this.form.company_scale_name) return uni.$u.toast('请输入人员规模')
				if (!this.form.contact_person) return uni.$u.toast('请输入负责人')
				if (!this.form.contact_phone) return uni.$u.toast('请输入联系方式')
				// if (!uni.$u.test.mobile(this.form.contact_phone)) return uni.$u.toast('请输入有效的联系方式')
				if (!this.form.address) return uni.$u.toast('请选择位置')
				if (!this.form.intro) return uni.$u.toast('请输入公司简介')
				if (!this.form.logo_image) return uni.$u.toast('请上传企业Logo')
				if (!this.form.other_images.length) return uni.$u.toast('请上传企业执照或相关证件')
				if (!Object.values(this.form.jobs[0]).every(e => e)) uni.$u.toast('岗位信息请补充完整')
				uni.showLoading({
					title: '提交中'
				})
				const form = {
					recruitment_meeting_id: this.form.recruitment_meeting_id, //招聘会id
					name: this.form.name, //企业名称
					contact_person: this.form.contact_person, //联系人
					contact_phone: this.form.contact_phone, //联系人电话
					address: this.form.address,
					longitude: this.form.longitude,
					latitude: this.form.latitude,
					industry_category_id: this.form.industry_category_id, //企业行业
					company_scale_id: this.form.company_scale_id, //企业规模
					company_type_id: this.form.company_type_id, //企业性质
					intro: this.form.intro, //企业介绍
					logo_image: this.form.logo_image,
					other_images: this.form.other_images,
					jobs: this.form.jobs.map(e => {
						return {
							title: e.title,
							salary: e.salary,
							education_level_id: e.education_level_id,
							descr: e.descr
						}
					})
				}
				this.$core.post({
					url: 'xilujob.third/applyRecruitment',
					data: form,
					success: (res) => {
						uni.$u.toast('报名已提交')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									const data = uni.getStorageSync('baoming')
									if (data[this.form.recruitment_meeting_id]) {
										delete data[this.form.recruitment_meeting_id]
									}
									uni.setStorageSync('baoming', data)
								}
							})
						}, 800)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		padding: 40rpx;
	}

	.page-head {
		height: 88rpx;
		background: var(--primary);

	}

	.form-item {
		margin-bottom: 24rpx;

		.address-form {
			display: flex;

			.address {
				margin-left: 16rpx;
				width: 214rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #E3F1FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #0D8AFF;
				text-align: center;
			}

		}

		.multi-file {
			display: flex;
			flex-wrap: wrap;

			>view {
				margin-right: 36rpx;
			}
		}

		.logo {
			width: 180rpx;
			height: 180rpx;
			background: #FBFBFB;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx dashed #E5E6EB;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			position: relative;

			.close {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: -20rpx;
				top: -20rpx;
			}

			.add {
				width: 28rpx;
				height: 28rpx;
			}

			.titles {
				margin-top: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
			}
		}



		.form-item-top {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;


			.imp {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F63F0E;
				padding-right: 8rpx;
			}

			.form-item-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}

	.wangweiinfo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 46rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		.add {
			width: 158rpx;
			height: 60rpx;
			background: #0D8AFF;
			border-radius: 8rpx 8rpx 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
			}

			.title {
				padding-left: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.info-form {
		width: 100%;
		background: #F5F5F5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		position: relative;
		margin-bottom: 30rpx;

		padding: 32rpx;
		padding-bottom: 12rpx;

		.sub {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: -24rpx;
			top: -24rpx;
		}

		.info-form-item {
			margin-bottom: 24rpx;

			.info-form-item-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin-bottom: 12rpx;
			}
		}
	}

	.textarea {
		width: 100%;
		border: 2rpx solid #EDEDED;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		padding: 12rpx 18rpx;
		min-height: 216rpx;
	}

	.footer {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		font-family: PingFang SC, PingFang SC;
		font-weight: 700;
		font-size: 28rpx;

		.footer-1 {
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #E3F1FF;
			border-radius: 130rpx 130rpx 130rpx 130rpx;
			text-align: center;
			color: #0D8AFF;
		}

		.footer-2 {
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #0D8AFF;
			border-radius: 130rpx 130rpx 130rpx 130rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}

	/deep/.u-input {
		background-color: #fff;
	}

	.textarea {
		background-color: #fff;
		border-radius: 8rpx;
	}

	.arrow-d {
		width: 36rpx;
		height: 36rpx;
		transform: rotate(90deg);
	}
</style>